<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <link rel="stylesheet" href="../css/common/normalize.css" />
  <link rel="stylesheet" href="../css/common/reset.css" />
  <link rel="stylesheet" href="../css/service.css" />
  <title>采矿家--首页</title>
</head>
<body>
  <div class="container">
    <!-- header -->
    <header class="header">
      <div class="icon-menu" v-show="!showMenu" @click="openMenu()">
        <img src="../images/icon_menu.png" alt="">
      </div>
      <div class="icon-close" v-show="showMenu" @click="closeMenu()">
          <img src="../images/icon_close.png" alt="">
        </div>
      <div class="icon-logo">
        <img src="../images/logo.jpg" alt="">
      </div>
      <div class="icon-user">
        <a href="login.html"><img src="../images/icon_user.png" alt=""></a>
      </div>
    </header>
    <!-- 菜单分类 -->
    <div class="menu" v-show="showMenu">
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="diamond.html">宝石</a></li>
        <li class="active"><a href="service.html">定制服务</a></li>
        <li><a href="purchasing.html">全球猎宝</a></li>
        <li><a href="journal.html">采矿家日记</a></li>
      </ul>
    </div>

    <!-- banner -->
    <div class="banner">
      <img src="../images/service_banner.jpg" alt="">
    </div>

    <div class="list-area">
      <div class="design">
        <div class="design-title">设计理念
          <span v-show="designOpen" @click="switchCase('designOpen', false)" class="collapse-btn"></span>
          <span v-show="!designOpen" @click="switchCase('designOpen', true)" class="collapse-btn plus-btn"></span>
        </div>
        <div v-show="designOpen" class="content-area">
          <p>私人珠宝顾问将了解您所有需求</p>
          <p>专业珠宝设计师将满足您一切想象</p>
          <p>上佳的材质，精良的工艺</p>
          <p>加工团队精工细作，加工全程保险防护</p>
        </div>
      </div>
      <div class="team">
        <div class="team-title">设计理念
          <span v-show="teamOpen" @click="switchCase('teamOpen', false)" class="collapse-btn"></span>
          <span v-show="!teamOpen" @click="switchCase('teamOpen', true)" class="collapse-btn plus-btn"></span>
        </div>
        <div v-show="teamOpen" class="team-content">
          <div class="team-list">
            <h3>成员一</h3>
            <p>销售顾问</p>
            <div>【这里描述成员的简介，这里描述成员的简介，这里描述成员的简介，这里描述成员的简介】</div>
          </div>
          <div class="team-list">
            <h3>成员一</h3>
            <p>销售顾问</p>
            <div>【这里描述成员的简介，这里描述成员的简介，这里描述成员的简介，这里描述成员的简介】</div>
          </div>
          <div class="team-list">
            <h3>成员一</h3>
            <p>销售顾问</p>
            <div>【这里描述成员的简介，这里描述成员的简介，这里描述成员的简介，这里描述成员的简介】</div>
          </div>
          <div class="team-list">
            <h3>成员一</h3>
            <p>销售顾问</p>
            <div>【这里描述成员的简介，这里描述成员的简介，这里描述成员的简介，这里描述成员的简介】</div>
          </div>
        </div>
      </div>
      <div class="case">
        <div class="case-title">案列设计
          <span v-show="caseOpen" @click="switchCase('caseOpen', false)" class="collapse-btn"></span>
          <span v-show="!caseOpen" @click="switchCase('caseOpen', true)" class="collapse-btn plus-btn"></span>
        </div>
        <div v-show="caseOpen" class="case-content">
          <span class="date">10-22</span>
          <h2>Classic--18K白金莫桑比克红宝石项链</h2>
          <img src="../images/service_img.jpg" alt="">
          <div>此枚18K白金莫桑比克红宝石项链，主石为一颗产自莫桑比克的天然未加热红宝石。通体鲜艳欲滴的红色调，浓郁饱和，柔美动人。周围以粒粒白度上佳的钻石点缀成心形的轮廓，璀璨惹眼。</div>
        </div>
        <div v-show="!caseOpen" class="bottom-line"></div>
      </div>
    </div>
    


  </div>
</body>
<script src="../libs/rem.js"></script>
<script src="../libs/vue.1.0.8.js"></script>
<script src="../js/service.js"></script>
</html>